<template>
  <BasicCard class="change-method">
    <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    <el-button class="setting-btn" plain :icon="Setting" @click="hanldeSetting">
      设置班次
    </el-button>

    <Modal @register="registerModal" />
  </BasicCard>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { Setting } from '@element-plus/icons-vue'
  import { useVxeModal } from '@/components/ui/vxe-modal'
  import { columnsChangeMethod } from '../data'
  import { cheJianHuanBanList } from '@/api/shengChanSheZhi'
  import Modal from './setScheduleModal.vue'

  const { t } = useI18n()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.换班设定'),
      isCustom: false,
      isExport: false,
      isFilterAndSort: false
    }, // 拓展的配置
    id: `shengchanshezhi-banzuweihu-huanbanfangshi`, // id用于缓存,务必配置
    maxHeight: '100%',
    loading: true,
    columns: columnsChangeMethod,
    toolbarConfig: {} // 工具栏
  })

  const curTime = ref(dayjs().format('YYYY-MM-DD'))
  const getList = () => {
    cheJianHuanBanList({
      DateStartInput: dayjs(curTime.value).format('YYYY-MM-DD')
    })
      .then((res: any) => {
        gridOptions.loading = false
        gridOptions.data = res.map((item) => {
          return {
            craftNodeNames: item.craftNodeNames,
            shiftNum: item.shiftNum,
            shiftName: item.shiftName,
            begin: item.begin,
            end: item.end,
            executionDate: dayjs(item.executionDate).format('YYYY-MM-DD HH:mm'),
            shiftOrder: item.shiftOrder,
            creationTime: dayjs(item.creationTime).format('YYYY-MM-DD HH:mm')
          }
        })
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  const [registerModal, modalMethods] = useVxeModal()
  const hanldeSetting = () => {
    modalMethods.openModal(true, {})
  }

  onMounted(() => {
    getList()
  })
</script>
<style scoped lang="scss">
  .setting-btn {
    width: 100%;
    margin-top: 20px;
  }
</style>
